<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>range Util</title>
</head>
<body>
 <form>
 <table border="1" cellspacing="0" cellpadding="0">
     <tr>
         <td>start Position: <input type="text" id="start" size="3"/>end Position: <input type="text" id="end" size="3"/></td>
     </tr>
     <tr>
         <td >
             <textarea id="textArea" onkeyup="sync()" onmouseup="sync()" rows="14" cols="60"></textarea>
         </td>
     </tr>
     <tr>
         <td><input type="text" id="replaceText" />
         <input type="button" onClick="rangeUtil.replace(this.form.replaceText.value)" value="replace"/>
         <input type="button" onClick="rangeUtil.setPosition(this.form.start.value,this.form.end.value)" value="setPosition"/>
         <input type="button" onClick="rangeUtil.display()" value="display"/>
         <input type="button" onClick="rangeUtil.debug()" value="debugInfo"/>
         </td>
     </tr>
 </table>
 </form>
  <script type="text/javascript" src="RangeUtil.js"></script>
  <script type="text/javascript">
	var rangeUtil = new RangeUtil(document.getElementById("textArea"));
	function sync(){
		rangeUtil.saveRangeInfo();
		document.getElementById("start").value = rangeUtil.range.start;
		document.getElementById("end").value = rangeUtil.range.end;	
	}
   </script>
</body>
</html>